﻿@using Orchard.ContentManagement;
@using Orchard.MediaLibrary.Fields;

@{
    var blogPost = Model.ContentItem;
    var part = (Orchard.ContentManagement.ContentPart)Model.ContentItem.BlogPostPart;
    var imageField = part.Fields.Where(field => field.PartFieldDefinition.Name == "BlogPostImage").SingleOrDefault() as MediaLibraryPickerField;
    int blogPostImageCounter = 0;
}

<article class="blog">
    <h1>@blogPost.TitlePart.Title</h1>

    <div class="row">
        <div class="col-md-6">
            <div class="pull-left">
                @Display(Model.Tags)
                <i class="fa fa-user"></i>
                <a href="@Href("~/Search")?q=@blogPost.CommonPart.Owner.UserName">@blogPost.CommonPart.Owner.UserName</a>
            </div>
        </div>
        <div class="col-md-6">
            <div class="pull-right">
                <i class="fa fa-comments"></i>
                @Display(Model.CommentsCount)
                <i class="fa fa-calendar"></i>
                @blogPost.CommonPart.CreatedUtc.ToLocalTime().ToString("MMMM d, yyyy")
            </div>
        </div>
    </div>

    <hr />

    @if (imageField != null && Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts.Count > 1) {
        <div class="row">
            <div class="col-md-6">
                <div id="blogpost-carousel-@blogPost.Id" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        @{blogPostImageCounter = 0;}
                        @foreach (var mediapart in Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts) {
                            <li data-target="#blogpost-carousel-@blogPost.Id" data-slide-to="@blogPostImageCounter" class="@(blogPostImageCounter == 0 ? "active" : string.Empty)"></li>
                            blogPostImageCounter++;
                        }
                    </ol>
                    <div class="carousel-inner">
                        @{blogPostImageCounter = 0;}
                        @foreach (var mediapart in Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts) {
                            <div class="item @(blogPostImageCounter == 0 ? "active" : string.Empty)">
                                <img src="@mediapart.MediaUrl" alt="@mediapart.AlternateText" class="img-responsive" />
                            </div>
                            blogPostImageCounter++;
                        }
                    </div>
                    <a class="left carousel-control" href="#blogpost-carousel-@blogPost.Id" data-slide="prev">
                        <span class="fa fa-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#blogpost-carousel-@blogPost.Id" data-slide="next">
                        <span class="fa fa-chevron-right"></span>
                    </a>
                </div>
            </div>
        </div>
    }
    else if (imageField != null && Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts.Count == 1) {
        <div class="row">
            <div class="col-md-6">
                @foreach (var mediapart in Model.ContentItem.BlogPostPart.BlogPostImage.MediaParts) {
                    <img src="@mediapart.MediaUrl" alt="@mediapart.AlternateText" class="img-responsive" />
                }
            </div>
        </div>
    }

    @Display(Model.Summary)

    <hr />

    @Display(Model.Footer)
</article>